<link rel="stylesheet" type="text/css" href="<?php echo css_url().'vertical_nav_menu_black.css'?>">

<div class="left-nav-bar-container">
    <div class ="vertical-nav-bar">
        <div id="account-management" class="nav-bar-entity selected">Account Management</div>
        <div id="edit-contact" class="nav-bar-entity">Contact Information</div>
    </div>
</div>

<script>
    $('.nav-bar-entity').on('click',function(){
        if($(this).attr('class') != "nav-bar-entity expanded"){
            $(this).siblings('.nav-bar-tab').hide("fast");
        }
    });
    
    $("#account-management").on('click',function(){
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us2_account_management_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    
    $("#edit-contact").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us2_account_edit_contact_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    
    
</script>